import { NavLink } from 'react-router-dom'
import '../App.css'
import { getChoiceMovieTag, getHotMoviesType } from '../api/api'
import { useState } from 'react'
import { useEffect } from 'react'

const ChoiceMoiveView = () => {
  const [ChoiceMovieTag, setChoiceMovieTag] = useState([])
  const [ChoiceMovieList, setChoiceMovieList] = useState([])
  useEffect(() => {
    const ChoiceMovieTagPromise = getChoiceMovieTag('movie')
    const ChoiceMovieListPromise = getHotMoviesType('movie', '热门')

    Promise.all([ChoiceMovieTagPromise, ChoiceMovieListPromise]).then(([ChoiceMovieTag, ChoiceMovieList]) => {
      setChoiceMovieTag(ChoiceMovieTag.data.tags)
      setChoiceMovieList(ChoiceMovieList.data)
    })
  }, [])
  return (
    <div className="ChoiceMovie-container w-1040">
      <h1 className="page-title pb-2 mt-5">选电影</h1>
      <div className="row">
        <div className="col-8">
          <div className="tab-list border-line pb-2">
            <ul className="d-flex flex-wrap m-0 ">
              {ChoiceMovieTag.map((item, index) => (
                <li key={index} className="mr-2 mb-2">
                  {/* <NavLink to={'/choiceMovie/hot'} activeClassName="activate">
                    {item}  // 路由匹配才高亮
                  </NavLink> */}
                  <NavLink to={'/choiceMovie'} activeClassName="tab-color pl-2 pr-2 f-size-14 pt-1 pb-1">
                    {item}
                  </NavLink>
                </li>
              ))}
            </ul>
          </div>
          <div className="pt-3 pb-3 d-flex justify-content-between tab-color f-size-13">
            <div className="sort d-flex align-items-center">
              <div className="mr-4">
                <input type="radio" className="f-size-13 mr-1 pt-1" />
                按热度排序
              </div>
              <div className="mr-4">
                <input type="radio" className="f-size-13 mr-1 pt-1" />
                按时间排序
              </div>
              <div className="mr-4">
                <input type="radio" className="f-size-13 mr-1 pt-1" />
                按评价排序
              </div>
            </div>
            <div className="d-flex check">
              <div className="mr-4">
                <input type="checkbox" className="f-size-13 mr-1 pt-1" />
                我没看过的
              </div>
              <div className="mr-4">
                <input type="checkbox" className="f-size-13 mr-1 pt-1" />
                可在线播放
              </div>
            </div>
          </div>
          <div className="overflow-hidden">
            <ul className="d-flex justify-content-between flex-wrap m-0">
              {ChoiceMovieList.slice(0, 20).map((item) => (
                <li className="mb-2 movie-frame" key={item.id}>
                  <a href="#">
                    <img src={item.cover} alt="" className="movie-img" />
                  </a>
                  <p className="pl-1 pr-1 movie-name f-size-13 mt-2 text-align-center text-center">
                    <span className="newImg mr-1">
                      <img src={require('../assets/images/ic_new.png')} alt="" />
                    </span>
                    <i>{item.title}</i>
                    <i className="score ml-1">6.3</i>
                  </p>
                </li>
              ))}
            </ul>
          </div>
          <div className="w-100 text-center load-more pt-2 pb-2 a-color f-size-14 mt-2 mb-5">加载更过</div>
        </div>
        <div className="col-4 sider-bar pl-5">
          <div className="hotSliceList pt-2 mb-5">
            <div className="border-line pb-3">
              <div className="screening-column row">
                <div className="col-10 d-flex align-content-center">
                  <span className="hotPlay-txt mr-2 hotSliceTxt f-size-16 display-block">热门片单</span>
                </div>
              </div>
            </div>
            <ul>
              <li className="d-flex pt-3 pb-3 border-line d-flex justify-content-between">
                <div className="pl-1 f-size-13">
                  <a href="" className="a-color">
                    Bonjour la France 电影篇
                  </a>
                </div>
                <span className="commend-slice sreenTab-color f-size-13">81推荐</span>
              </li>
              <li className="d-flex pt-3 pb-3 border-line d-flex justify-content-between">
                <div className="pl-1 f-size-13">
                  <a href="" className="a-color">
                    Bonjour la France 电影篇
                  </a>
                </div>
                <span className="commend-slice sreenTab-color f-size-13">81推荐</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ChoiceMoiveView
